<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">维修车辆</span>
    <el-button @click="dialogVisible=true" type="primary" style="float:right;margin-top:13px;">录入维修车辆</el-button>
  </div>
  <!-- 新增车辆维修弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" :before-close="handleClose"
             style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送修人">
            <el-input  readonly :value="user.username" v-model="saveRepairForm.userId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修车辆">
            <el-select placeholder="请选择" v-model="saveRepairForm.vehicleId">
              <el-option v-for="item in vehicleArr" :key="item"
                         :value="item.id"
                         :label="item.license"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修项目">
            <el-select placeholder="请选择" v-model="saveRepairForm.item">
              <el-option v-for="item in itemTypeOptions" :label="item.label" :value="item.value"></el-option>
<!--              <el-option label="汽车保养" value="10"></el-option>-->
<!--              <el-option label="汽车美容" value="20"></el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修地点">
            <el-select placeholder="请选择" v-model="saveRepairForm.addr">
              <el-option v-for="item in addrTypeOptions" :label="item.label" :value="item.value"></el-option>
<!--              <el-option label="沃尔沃专修店" value="10"></el-option>-->
<!--              <el-option label="美奥行汽修" value="20"></el-option>-->
<!--              <el-option label="悦心金峰盛车检汽修" value="30"></el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修材料">
            <el-select placeholder="请选择" v-model="saveRepairForm.material">
              <el-option v-for="item in  materialTypeOptions"  :label="item.label" :value="item.value"></el-option>
<!--              <el-option label="汽缸垫进排气歧管垫" value="10"></el-option>-->
<!--              <el-option label="发动机前后悬挂胶垫" value="20"></el-option>-->
<!--              <el-option label="板簧胶套" value="30"></el-option>-->
<!--              <el-option label="消声器" value="40"></el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修费用">
            <el-input placeholder="请输入" v-model="saveRepairForm.fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveRepairForm.repairTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修状态">
            <el-radio-group  v-model="saveRepairForm.status">
              <el-radio value="1" >维修中</el-radio>
              <el-radio value="0" >已完成</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveRepair">确定</el-button>
    </template>
  </el-dialog>
  <!-- 车辆维修搜素卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="维修车辆">
        <el-input placeholder="请输入车辆号牌" style="width:220px;"
                  v-model="searchVehicleRepairFrom.license" @keydown.enter="loadVehicleRepair"></el-input>
      </el-form-item>
      <el-form-item label="送修人员" style="width:290px;">
        <el-input placeholder="请输入送修人姓名" style="width:220px;"
                  v-model="searchVehicleRepairFrom.username" @keydown.enter="loadVehicleRepair"></el-input>
      </el-form-item>
      <el-form-item label="维修状态" style="width:290px;">
        <el-input placeholder="请输入维修状态" style="width:220px;"
                  v-model="searchVehicleRepairFrom.status" @keydown.enter="loadVehicleRepair"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadVehicleRepair">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 车辆维修列表 -->
  <el-card style="margin:20px;">
    <el-table :data="vehicleRepairArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="license" label="维修车辆" align="center" />
      <el-table-column prop="item" label="维修项目" align="center" :formatter="repairItemFormatter"/>
      <el-table-column prop="username" label="送修人员" align="center"/>
      <el-table-column prop="addr" label="维修地点" align="center" :formatter="repairAddrFormatter"/>
      <el-table-column prop="repairTime" label="维修时间" align="center"/>
      <el-table-column prop="fee" label="维修费用" align="center"/>
      <el-table-column prop="material" label="维修材料" align="center" :formatter="repairMaterialFormatter"/>
      <el-table-column prop="status" label="维修状态" align="center" :formatter="repairTypeFormatter"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editRepair(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteRepair(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
//控制新增车辆维修弹窗是否显示
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
//获取当前登录用户
const user  = ref(getUser());
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('录入维修车辆');
//定义数组保存维修车辆信息
const vehicleRepairArr = ref([]);
//定义数组用来保存维修车id，新增申请时入库使用
const repairVehicleIdList  =ref([]);
//定义对象保存查询条件
const searchVehicleRepairFrom = ref({license:'',username:'',status:''});

const materialTypeOptions = ref();
const itemTypeOptions =ref();
const addrTypeOptions = ref();
onMounted (()=>{
  loadVehicleRepair();
  loadVehicle();
  //加载字典
  loadDictOptions(materialTypeOptions,'repair_material');
  loadDictOptions(itemTypeOptions,'repair_item');
  loadDictOptions(addrTypeOptions,'repair_addr');
})
const loadVehicleRepair = ()=>{
  let data = qs.stringify(searchVehicleRepairFrom.value);
  axios.get(BASE_URL+'/v1/repair/select?'+data).then((response)=>{
    if (response.data.code == 2000){
      vehicleRepairArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const vehicleArr = ref([]);
//加载车辆数据
const loadVehicle = ()=>{
  axios.get(BASE_URL+'/v1/vehicle/select').then((response)=>{
    if (response.data.code == 2000){
      vehicleArr.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
};


//重置车辆搜素信息
const resetSearch = ()=>{
  searchVehicleRepairFrom.value={};
  loadVehicleRepair();
}
const repairItemFormatter = (row,column,cellValue,index)=>{
  // if(cellValue==10){
  //   cellValue = '汽车保养'
  // }else if(cellValue==20){
  //   cellValue = '汽车美容'
  // }else if(cellValue==30){
  //   cellValue = '钣金喷漆'
  // }else if(cellValue==40){
  //   cellValue = '四轮定位'
  // }else if(cellValue==50){
  //   cellValue = '机修'
  // }
  if (!itemTypeOptions.value){
    return cellValue;
  }
  for (let item of itemTypeOptions.value){
    if (item.value ==cellValue){
      cellValue=item.label;
    }
  }
  return cellValue;
}
const repairAddrFormatter = (row,column,cellValue,index)=>{
  // if(cellValue==10){
  //   cellValue = '沃尔沃专修店'
  // }else if(cellValue==20){
  //   cellValue = '美奥行汽修'
  // }else if(cellValue==30){
  //   cellValue = '悦心金峰盛车检汽修'
  // }else if(cellValue==40){
  //   cellValue = '京昌鑫顺汽修'
  // }addrTypeOptions
  if(!addrTypeOptions.value){
    return cellValue;
  }
  for (let item of addrTypeOptions.value){
    if (item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
const repairMaterialFormatter = (row,column,cellValue,index)=>{
  // if(cellValue==10){
  //   cellValue = '汽缸垫进排气歧管垫'
  // }else if(cellValue==20){
  //   cellValue = '发动机前后悬挂胶垫'
  // }else if(cellValue==30){
  //   cellValue = '板簧胶套'
  // }else if(cellValue==40){
  //   cellValue = '消声器'
  // }else if(cellValue==50){
  //   cellValue = '气门弹簧'
  // }else if(cellValue==60){
  //   cellValue = '气门'
  // }else if(cellValue==70){
  //   cellValue = '止推垫'
  // }else if(cellValue==80){
  //   cellValue = '大小瓦'
  // }else if(cellValue==90){
  //   cellValue = '四配套（缸套、活塞、活塞环、活塞销）'
  // }else if(cellValue==100){
  //   cellValue = '轴承'
  // }
  if(!materialTypeOptions.value){
    return cellValue;
  }
  for(let item of materialTypeOptions.value){
    if(item.value==cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
//定义维修状态转换
const repairTypeFormatter = (row,column,cellValue,index)=>{
  if (cellValue==0){
    cellValue='已完成';
  }else if (cellValue==1){
    cellValue='维修中';
  }
  return cellValue;
}
//编辑维修单
const editRepair = (id)=>{
  dialogVisible.value =true;
  dialogTitle.value = '修改维修信息';
  console.log(id);
  axios.get(BASE_URL+'/v1/repair/select?id='+id).then((response)=>{
    if (response.data.code==2000){
      saveRepairForm.value = response.data.data[0]
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
const handleClose = ()=>{
  if (confirm('确认关闭本窗口')){
    dialogVisible.value = false;
    saveRepairForm.value={};
  }
}
//准备对象用来收集新增/修改车辆的表单信息
const saveRepairForm = ref({
  material:'',
  repairTime:'',
  item:'',
  fee:'',
  addr:'',
  status:'',
  vehicleId:'',
  userId:''
})
//定义保存维修信息的方法
const saveRepair = ()=>{
  saveRepairForm.value.username = user.value.username;//申请人姓名
  saveRepairForm.value.userId = user.value.id;
  let data = qs.stringify(saveRepairForm.value);
  axios.post(BASE_URL+'/v1/repair/save',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('保存成功!');
      dialogVisible.value = false;
      saveRepairForm.value={}
      loadVehicleRepair();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//删除维修信息
const deleteRepair= (repairId) => {
  if (confirm('你是否要删除此维修车辆?')){
    axios.post(BASE_URL+'/v1/repair/delete/'+repairId).then((response)=>{
      if (response.data.code == 2000){
        ElMessage.success('删除成功!');
        loadVehicleRepair();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
</script>


<style scoped>

</style>